<!-- 关于我的-钱包积分卡组件 -->
<template>
	<view>
		<u-row>
		    <u-col span="10" offset="1">
				<view class="wallet">
					<u-row>
						<u-col>
							<view class="wallet-top">
								<u-row>
									<u-col span="5" offset="0.5">
										<view class="wallet-top-card">
											<view class="card-text">
												<u--text text="积分卡" bold></u--text>
											</view>
											<view class="card-explain">
												<u--text text="可兑换商品" size="11"></u--text>
											</view>
											<view>
												<u-icon name="../../static/icon/mine/hanbao.png" width="145rpx" height="145rpx"></u-icon>
											</view>
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col>
							<view class="wallet-bottom">
								<u-row>
									<u-col span="5">
										<view class="balance">
											<view class="balance-title">
												<u--text text="余额" size="16" ></u--text>
											</view>
											<view class="balance-money">
												<u--text text="100" mode="price"  bold size="20" ></u--text>
											</view>
										</view>
									</u-col>
									<u-col span="4">
										<view class="goWallet">
											<view class="goWalletText">
												<u--text align="center" text="我的钱包" bold prefixIcon="../../static/icon/mine/renminbi.png" suffixIcon="arrow-rightward"></u--text>
											</view>
										</view>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name:"wallet",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	// 钱包整体
	.wallet{
		height: 290rpx;
		border-radius: 25rpx;
		position: relative;
		top: 20rpx;
		
		// 钱包上半部分
		.wallet-top{
			height: 130rpx;
			background-color: #FBC000;
			border-radius: 35rpx 35rpx 0 0;
			
			// 积分卡
			.wallet-top-card{
				height: 110rpx;
				background-color: #EAEBEC;
				border-radius: 15rpx 15rpx 0 0;
				position: relative;
				top: 20rpx;
				
				// 积分卡标题
				.card-text{
					font-family: "黑体";
					width: 120rpx;
					position: absolute;
					right: 0;
					top: 25rpx;
				}
				// 积分卡说明
				.card-explain{
					width: 130rpx;
					position: absolute;
					right: 0;
					top: 60rpx;
				}
			}
		}
		
		// 钱包下半部分
		.wallet-bottom{
			position: relative;
			border-top: solid 0.5rpx white;
			background: linear-gradient(to top,#FDC01D,#FFCD0C);
			height: 160rpx;
			border-radius: 0 0 35rpx 35rpx;
			z-index: 10;
			
			// 余额栅格
			.balance{
				position: relative;
				top: 20rpx;
				
				// 余额文字
				.balance-title{
					padding-left: 40rpx;
				}
				
				// 余额剩余
				.balance-money{
					padding-left: 30rpx;
					padding-top: 5rpx;
				}
			}
			
			// 我的钱包栅格
			.goWallet{
				height: 100rpx;
				background-color: rgb(253, 215, 47);
				position: absolute;
				bottom: 30rpx;
				right: 0;
				border-radius: 50rpx 0 0 50rpx;	
				
				// 我的钱包文字
				.goWalletText{
					line-height: 100rpx;
				}
			}
		}
	}
</style>